<template>
	<view>
		<dsl-navbar title="黑名单" bgTopImg="white" isBack></dsl-navbar>
		<view v-if="blackList && blackList.length !=0">
			<view class="flex justify-between align-center solid-bottom padding" v-for="(item,index) in blackList"
				:key='index'>
				<view class="flex align-center">
					<image :src="item.friendAvatar" mode="aspectFill" class="square_image solid"></image>
					<view class="margin-left">
						<view class="square_name one_overflow">{{item.friendName ||'游客'}}</view>
						<view class="square_classify one_overflow margin-top-sm">
							{{item.createTime}}
						</view>
					</view>
				</view>

				<view class="text-center text-grey" @click="shiftOut(item)">
					<image src="/static/message/imgjiechu.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<view>解除</view>
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading></moreLoading>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				pageNum: 1
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			this.pageNum = 1
			this.getblacklistApi()
		},
		methods: {
			/**
			 * getblacklist 黑名单列表
			 * removeBlackListApi 移出黑名单接口
			 */
			...mapActions('chat', [
				'getblacklist',
				'removeBlackListApi'
			]),

			//移出黑名单
			shiftOut(item) {
				let that = this
				uni.showActionSheet({
					itemList: ['移出黑名单列表'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.removeBlackListApi({
								id: item.id
							})
						} else {}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
				
			},

			//黑名单
			getblacklistApi() {
				this.getblacklist({
					pageSize: 20,
					pageNum: this.pageNum,
				})
			},
			onReachBottom(e) {

				this.pageNum++
				this.getblacklistApi()
			},


		},
		computed: {
			...mapState('chat', ['blackList']),
		},
		components: {},
	}
</script>

<style>
	/* 广场 */
	.text-grey {
		color: #B7BED8;
	}

	.square_image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.square_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.square_name {
		width: 308rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.square_classify {
		width: 308rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
	}

	.submit {
		width: 110rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 10rpx;
		line-height: 60rpx;
		color: white;
		text-align: center;
	}

	view {}
</style>
